<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            height:300px;
            width:800px;
            margin:0 auto;
            position:relative;
        }
        .ball{
            width:42px;height:42px;
            background-color: #5fb878;
            position:absolute;
            top:100px;left:00px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class='box'>
        <div class='ball'></div>
    </div>
    <script src='tween.js'></script>
    <script>
     
            var ball = document.querySelector(".ball");
            var isMoving = false;
            
            // 点击球触发运动
            if (ball) {
                ball.onclick = function () {
                    if (isMoving == true) {
                        return;	
                    }
                    
                    // 一些数据
                    // 当前时间
                    var start = 0;
                    // 初始值，因为一开始球在最左边，因此是0
                    var begin = 0;
                    // 容器宽度减去球的宽度
                    var end = (800 - 42);
                    // 持续时间
                    var during = 100;
                    
                    // 当前圆球对应的动画算法
                    var fnGetCurrentPosition;
                    
                    // if (arrKeyTween.length == 1) {
                    //     fnGetCurrentPosition = Math.tween[arrKeyTween[0]];
                    // } else if (arrKeyTween.length == 2) {
                    //     fnGetCurrentPosition = Math.tween[arrKeyTween[0]][arrKeyTween[1]];
                    // }
                    fnGetCurrentPosition = Math.tween.Linear;
                    // 运动
                    var step = function() {
                        // 当前的运动位置
                        var left = fnGetCurrentPosition(start, begin, end, during);
                        // 高级浏览器使用transform位置，会更细腻
                        if (history.pushState) {
                            ball.style.transform = 'translateX(' + left + 'px)';
                        } else {
                            ball.style.left = left + 'px';	
                        }
                        
                        // 时间递增
                        start++;
                        
                        // 如果还没有运动到位，继续
                        if (start <= during) {
                             requestAnimationFrame(step);
                        } else {
                            // 动画结束，这里可以插入回调...
                            // callback()...
                            
                            // 标记动画已结束，可以再次点击小球执行动画
                            isMoving = false;
                        }
                    };
                    // 开始执行动画
                    if (typeof fnGetCurrentPosition == 'function') {
                        isMoving = true;
                        step();
                    }
                };	
            }
             
  
    </script>
</body>
</html>